<template>
  <view class="my-select">
    <view class="my-select-item-box">
      <view class="my-input">
        <u-input
          v-model="name"
          readonly
          class="input"
          @click.native.stop="open"
          :placeholder="placeholder"
          :clearable="clearable"
        >
          <template slot="suffix">
            <view class="icon">
              <uni-icons
                v-if="name && clearable"
                @click.native.stop="del"
                type="clear"
                color="#c0c4cc"
                size="24"
              />
              <uni-icons
                v-else
                style="top: 14rpx"
                :type="pickerValue ? 'top' : 'bottom'"
                size="14"
                color="#999"
              />
            </view>
          </template>
        </u-input>
      </view>
    </view>
	
    <u-picker
      v-if="!cascader"
      @cancel="() => (pickerValue = false)"
      @confirm="bindPickerChange"
      :show="pickerValue"
      :columns="array"
      keyName="label"
    >
    </u-picker>
    <ZhilinCascader
      v-else
      v-model="pickerValue"
      :defaultSelected="id"
      :options="option"
		:isFullValue='isFullValue'
      @confirm="bindPickerChange"
    />
  </view>
</template>
<script>
import ZhilinCascader from "./zhilin-cascader/zhilin-cascader";
export default {
  components: { ZhilinCascader },
  props: {
    value: [String, Array],
    placeholder: String,
    cascader: {
      type: Boolean,
      default: false,
    },
    clearable: {
      type: Boolean,
      default: true,
    },
    option: {
      type: Array,
      default: () => [],
    },
    url: String,
	isFullValue:{
	  type: Boolean,
	  default: false,
	},
  },
  data() {
    return {
      pickerValue: false,
      name: "",
      id: "",
      array: [],
    };
  },
  watch: {
    value: {
      immediate: true,
      handler(val, old) {
        this.id = val;
        if (!val) this.name = "";
      },
    },
    option: {
      immediate: true,
      handler(val, old) {
        this.array = [val];
		console.log(this.option)
        if (!this.cascader && this.id)
          this.name = this.array[0].find(
            (item) => item.value == this.value
          ).label;
      },
    },
  },
  methods: {
    open() {
      this.pickerValue = true;
    },
    del() {
      this.name = "";
      this.id = "";
      this.$emit("input", this.id);
      this.$emit("change", this.id);
    },
    bindPickerChange(val, names) {
      this.pickerValue = false;
      if (this.cascader) {
        this.name = names.join("/");
        this.$emit("input", val);
        this.$emit("change", val, names);
      } else {
        this.name = val.value[0].label;
        this.$emit("input", val.value[0].value);
        this.$emit("change", val.value[0]);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.my-select {
  width: 100%;
}
.my-select-item-box {
  position: relative;

  .icon {
  }
}
.my-input {
  position: relative;
  .input {
  }
}
</style>
